Introducing: Loops & Animation Continue

OPENING QUESTION: Imagine you could draw perfect lines to a perfect length and draw perfect angles connecting other perfect lines.

It's gonna drive ya a bit nuts, but for purposes of this exercise we are going to (quite appropriately, but we'll revisit that in a few moments) determine the angles we draw from a different perspective then usual... that is by way of saying we'll determine the angle that we draw by taking 360/n where n is the number of sides in our polygons. You'll just have to take it on trust for now.

To wit:

  1. Write down the steps to draw a square with 5.0 cm sides
  2. Now write down the steps to draw a hexagon with 5.0 sides

Which steps repeat?

OBJECTIVES: 

  • I will start writing my first loop code segment during today's <short> class.

HELP FILES:

  • I found this old video I made that will be helpful especially for those of us who are interesting in pushing the envelope a bit and start coding in html???

WORK O' THE DAY: 

The first step in using a loop (generally) and doing animation (specifically) is to sketch, list or otherwise write an algorithm that deals with JUST the repetitive parts.

Anything that repeats goes in the loop, everything else stays out

With that in mind, please re-create the table I wrote on the board yesterday for polygons with equal sides and equal angles. Let's start with just the shapes that work 'evenly' into 360 (yes, it works, don't freak out, we'll determine WHY it works later):

    • Squares
    • Pentagons
    • Hexagons
    • Octagons
    • Nonagons
    • Decagons

    Now let's start by writing an algorithm for drawing a square as if we could perfectly and precisely outline the steps

     

     

     

     

     

     

    Something like this perhaps:

    • move to the center of the screen
    • turn 90 degrees to the right
    • draw a 5.0 cm line
    • turn 90 degrees to the right
    • draw a 5.0 cm line
    • turn 90 degrees to the right
    • draw a 5.0 cm line
    • turn 90 degrees to the right
    • draw a 5.0 cm line

     

    Now let's write an algorithm for drawing a pentagon

    Something like this perhaps:

    • move to the center of the screen
    • turn 72 degrees to the right
    • draw a 5.0 cm line
    • turn 72 degrees to the right
    • draw a 5.0 cm line
    • turn 72 degrees to the right
    • draw a 5.0 cm line
    • turn 72 degrees to the right
    • draw a 5.0 cm line
    • turn 72 degrees to the right
    • draw a 5.0 cm line

      There is VERY clearly a pattern here that we can put in a loop.

      Here's an algorithm for a square in more coding/programming terms:

       

  • START
  • move to the center of the screen
  • LOOP 4 times
    • turn 90 degrees to the right
    • draw a 5.0 cm line
  • ENDLOOP

Notice that if we realize that the 'turtle' moves in relation to the EXTERNAL (not interior) angles then if N is the Number of sides of the polygon then:

  • START
  • move to the center of the screen
  • LOOP N times
    • turn 360/N degrees to the right
    • draw a 5.0 cm line
  • ENDLOOP